#{extends 'main.html' /}

<div id="principal">

<div id="zona_datos_busqueda">

<div id="bloque_datos_busqueda">

<div style="height:30px;width:350px;padding-top: 10px;">
<div style="width:120px;float:left;"><label>Curso :</label></div><input type="text" id="nombrecurso" style="width:200px;float:right;" />
</div>

<div style="height:30px;width:350px;padding-top: 10px;">
<div style="width:120px;float:left;"><label>Codigo :</label></div><input type="text" id="codigocurso" style="width:200px;float:right;" />
</div>

<div style="height:30px;width:350px;padding-top: 10px;">
<div style="width:120px;float:left;"><label>Creditos :</label></div><input type="text" id="numerocreditos" style="width:200px;float:right;" />
</div>

<input type="text" id="nombreplan" style="display:none;" value="${plan.nombreplan}" />


<div style="height:30px;width:350px;text-align: center;padding-top: 10px;">
<input type="submit" id="submit" style="width:120px;" value="Consultar" />
</div>

</div>


</div>



<table id="tabla"></table>
<div id="pager"></div>



</div>

<script type="text/javascript">

$(document).ready(function(){
	
	$('#tabla').jqGrid({
		
		url:'@{busquedaCurso()}',
		datatype:'JSON',
		colNames:['Numero ID','Curso','Codigo','Credito','Plan'],
		colModel:[{name:'id',index:'id',width:100,float:'left',resizable:true},
		          {name:'nombrecurso',index:'nombrecurso',width:100,float:'right',resizable:true},
		          {name:'codigocurso',index:'codigocurso',width:100,float:'right',resizable:true},
		          {name:'numerocreditos',index:'numerocreditos',width:100,float:'right',resizable:true},
		          {name:'plan',index:'plan',width:100,float:'right',resizable:true}
			 ],
		rowList:10,
		rowGroup:[10,20,30],
		pager:'#pager',
		sortname:'id',
		sortorder:'desc',
		caption:'Resultado de Busqueda',
		height:300,
		autowidth:true,
		viewrecords:true,
		jsonReader:
			{
				id:'0',
				repeatitems:false
			},
		serializeGridData: function(data){
			var nombrecurso=$.trim($('#nombrecurso').val());
			var codigocurso=$.trim($('#codigocurso').val());
			var numerocreditos=$.trim($('#numerocreditos').val());
			var nombreplan= $('#nombreplan').val();
			
			delete data['nombrecurso'];
			delete data['codigocurso'];
			delete data['numerocreditos'];
			delete data['nombreplan'];
			
			if(nombrecurso != ''){
				data.nombrecurso=nombrecurso;
			}
			if(codigocurso != ''){
				data.codigocurso=codigocurso;
			}
			if(numerocreditos != ''){
				data.numerocreditos=numerocreditos;
			}
			if(nombreplan !=''){
				data.nombreplan=nombreplan;
			}
			return data;
			
		}
	});
	
	$('#tabla').jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
	
	$('#submit').button().click(function(){
		$('#tabla').trigger("reloadGrid");
	});
	
});

</script>